<template>
  <div>
    <div class="nav">
     <span @click="tag=0" :class="{active:tag==0}">全部</span>
     <span @click="tag=7" :class="{active:tag==7}">华语</span>
     <span @click="tag=96" :class="{active:tag==96}">欧美</span>
     <span @click="tag=8" :class="{active:tag==8}">日本</span>
     <span @click="tag=16" :class="{active:tag==16}">韩国</span>
    </div>
    <table style="width:1200px;margin:auto">
       <tr class="title">
         <th class="sort"></th>
         <th class="pic"></th>
         <th class="name">歌曲名称</th>
         <th class="singer">歌手</th>
         <th class="album">专辑</th>
         <th class="time">时长</th>
       </tr>
       <tbody> 
         <tr class="content" v-for="(item,index) in lists"
          :key="index" @click='palyMusic(item.id)'>
         <td class="sort">{{index+1}}</td>
         <td class="pic">
           <img :src="item.album.picUrl" alt="" class="ima">
           <div class="bofang"><img src="../../assets/image/播放 (2).png" alt=""></div>
           
         </td>
         <td class="name">{{item.name}}</td>
         <td class="singer">{{item.album.artists["0"].name}}</td>
         <td class="album">{{item.album.name}}</td>
         <td class="time">{{item.duration}}</td>
       </tr>
       </tbody>
      
    </table>
  </div>
</template>

<script>
import axios from 'axios';
import '@/assets/css/03.newMusic.css'
export default {
  data() {
    return {
    lists:[],
    tag:"0"
    }
  },
  watch:{
    tag(){
      this.getList()
    },
    
  },
  created(){
 this.getList()
  },
  methods:{
    getList(){
       axios({
    method:'get',
    url:'https://autumnfish.cn/top/song',
   params:{
    type:this.tag
   }
  }).then((res)=>{
    // console.log(res);
    this.lists=res.data.data
    this.lists.length=10
    // console.log(this.lists);
    //修改时长
    for(let i=0;i<this.lists.length;i++){
      let duration=this.lists[i].duration
      let min= parseInt(duration/1000/60)
      if(min<10){
        min="0"+min
      }
      let sec= parseInt(duration/1000%60)
      if(sec<10){
        sec="0"+sec
      }
      this.lists[i].duration=`${min}:${sec}`
    }
  })
    },
    palyMusic(id){
      // console.log(id);
      axios({
        method:'get',
        url: 'https://autumnfish.cn/song/url',
        params: {
          id
        }
      }).then(res=>{
        // console.log(res.data.data['0']);
        let url = res.data.data[0].url
        console.log(url);
        //设置给 父组件的 播放地址
        this.$parent.musicUrl = url;
        console.log(url);
      })
    }
  }
 
};
</script>

<style>
</style>